<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>主页</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstarp/bootstrap.css}">
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/bootstarp/bootstrap.js}"></script>
    <script th:src="@{/bootstarp/bootstrap-paginator.js}"></script>
</head>
<body>

<div class="container">
    <h1 class="page-header">豪车租凭系统</h1>
    <br><br>
    <div style="text-align: center">
        <form th:action="@{/invitation/main}" method="post" name="form1" class="form-inline">
            <div class="form-group">
                <input type="hidden" name="pageNum" id="pageNum">
                <label for="" class="">模糊搜索:</label>
                <input type="text" name="searchTitle" id="" class="form-control" placeholder="请输入关键字" th:value="${searchTitle}">
            </div>
            <input type="submit" value="查询" class="btn btn-primary">
        </form>
    </div>
    <br>
    <div>
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <th>昵称</th>
                <th>租凭摘要</th>
                <th>用户</th>
                <th>租凭时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            <tr th:each="inv:${pageInfo.list}">
                <td th:text="${inv.title}"></td>
                <td th:text="${inv.summary}"></td>
                <td th:text="${inv.author}"></td>
                <td th:text="${#dates.format(inv.createdate,'yyyy-MM-dd')}"></td>
                <td>
                    <a th:href="@{'/replyDetail/main/'+${inv.id}}" class="btn btn-info">查看详情</a>
                    <a href="javascript:;" th:onclick="toDel([[${inv.id}]])" class="btn btn-danger">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: center">
        <!--分页组件-->
        <ul id="page"></ul>
    </div>
</div>


<script th:inline="javascript">
    /*jquery的入口函数*/
    $(function () {
        //获取当前页
        var currentPage = [[${pageInfo.pageNum}]];
        //获取总页数
        var totalPages = [[${pageInfo.pages}]];
        $("#page").bootstrapPaginator({
            bootstrapMajorVersion: 3, //对应的bootstrap版本
            currentPage: currentPage, //当前页数
            numberOfPages: 10, //每次显示页数
            totalPages: totalPages, //总页数
            useBootstrapTooltip: false,
            itemTexts: function (type, page, current) {//设置分页按钮显示字体样式
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //点击事件
            onPageClicked: function (event, originalEvent, type, page) {
                console.log(page);
                // 业务处理
                //page: 表示当前页码
                /*获取pageNum隐藏域，给它赋值 page*/
                $("#pageNum").val(page);
                /*提交表单*/
                document.form1.submit();
            }
        });
    });

    // function toShow(id) {
    //     window.location.href = "/replyDetail/main/" + id;
    // }

    function toDel(id) {
        if (confirm("是否删除？将会删除帖子以及所有回复,该操作将不可逆！")) {
            window.location.href = "/invitation/del/" + id;
        }
    }

    // <c:if test="${del == 'ok'}">
    //     alert("删除成功！")
    // </c:if>
    // <c:if test="${del == 'no'}">
    //     alert("删除失败！")
    // </c:if>

    var add = [[${del}]];
    if(add == 'ok'){
        alert("删除成功！");
    }else if(add == 'no'){
        alert("删除失败！");
    }
</script>
</body>
</html>